<template>
  <div class="layout">
    <div class="tabs">
      <router-link to="/main/child1">
        <button>child1</button>
      </router-link>
      <router-link to="/main/child2">
        <button>child2</button>
      </router-link>
      <!-- <button @click="sendMessage">发送消息</button> -->
    </div>
    <div>
      <div>
        全局用户信息:
        {{ userStore.userInfo.name }}-{{ userStore.userInfo.gender }}-{{
          userStore.userInfo.age
        }}-{{ userStore.userInfo.phone }}
      </div>
    </div>
    <router-view />
    <div id="child-app"></div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import start from "@/qiankun/micro";
import { useUserStore } from "@/store/user";
const userStore = useUserStore();

onMounted(() => {
  //---------------------------
  // 启动qiankun
  start({
    sandbox: {
      experimentalStyleIsolation: true, // 样式隔离
    },
  });
  //---------------------------
});
</script>

<style scoped>
.layout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.tabs > a:not(:last-child) {
  margin-right: 20px;
}
#child-app {
  background-color: rgba(211, 90, 2, 0.2);
  width: 300px;
  height: 300px;
}
</style>
